<template>
    <!-- <div class='my_card' style="background: url(../../../static/images/huiyuanbg.png) no-repeat;background-size:100%;400px;">
        <div class='ma_card-wh fcc'>
            <div class="ff">
                <span class='my_card_price kaiti zan-font-bold'>￥22.3</span>
                <div class='kaiti zan-font-18 tex'>大米面皮</div>
            </div>
        </div>
        <div class='fc pos_card '>
            <span class='zan-font-14 kaiti card'>卡号：25565153535353535</span>
        </div>
    </div> -->
    <div class="cardContaienr">
        <div class="cardList" v-for="(v,i) in cardList" :key="i">
            <div class="cardTop">
                <span class="cardMoney">￥{{v.money}}</span>
                <span class="cardTitle">秒通体验中心会员卡</span>
            </div>
            <div class="cardbottom">
                <span class="cardNo">积分：{{v.integral}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	name: 'my_card',
	data() {
		return {
            cardList:[]
        }
	},
	methods: {
		/**
		 * @Description: ${获取会员卡列表}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		getCardList() {
			let getParams = {
				url: '/SecCahConsumehisList',
				method: 'post',
				data: {
					// memberId:wx.getStorageSync('key')
					memberId: '101',
				},
			}
			this.$JZWX(getParams).then(re => {
                if(re.status == 0){
                    this.cardList = re.data
                }
            })
		},
	},
	onShow() {
		this.getCardList()
	},
}
</script>

<style lang='scss' scoped>
.cardContaienr{
    width: 100%;
    overflow: auto;
    .cardList{
        width: 95%;
        height: 195px;
        background-color: #e6c301;
        margin: 0 auto;
        border-radius: 8px;
        margin-top: 10px;
        background: url('https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/minipro/huiyuanbg.png') no-repeat center;
        background-size: 100% 100%;
        .cardTop{
            width: 100%;
            height: 145px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .cardMoney{
                font-size: 18px;
                color: #E6C301;
                display: inline-block;
                margin-bottom: 10px;
            }
            .cardTitle{
                font-size: 16px;
                color: #DDCFA8;
            }
        }
        .cardbottom{
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .cardNo{
                color: #DDCFA8;
                font-size: 14px;
            }
        }
    }
}

.my_card {
	position: relative;
}

.ma_card-wh {
	height: 195px;
	width: 100%;
}
.ff {
	padding-top: 40px;
}

.my_card {
	height: 242px;
	width: 100%;
	border-radius: 10px;
	margin-top: 15rpx;
	text-align: center;
	line-height: 30px;
}

.my_card_price {
	color: #e6c301;
}

.tex {
	color: #ddcfa8;
}

.dianmian_logo {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.pos_card {
	position: absolute;
	bottom: 22%;
	left: 16%;
}

.card {
	color: #ddcfa8;
	padding-top: 35rpx;
	padding-left: 12px;
}

.integral {
	font-size: 14px;
	font-weight: normal;
	color: #ddcfa8;
}
</style>
